<template>
  <div>
    <el-dialog :title="titleInfo.text+titleInfo.pageTitle" :visible.sync="dialogFormVisible" width="650px" @close="$emit('closeFrom')">
      <el-form ref="dataForm" :model="formBase" :rules="rules">
        <el-form-item label="策略名称:" prop="policyName">
          <el-input
            v-model="formBase.policyName"
            placeholder="请输入"
            maxlength="15"
            show-word-limit
          />
        </el-form-item>
        <el-form-item label="策略方案:" prop="discount">
          <el-input-number v-model="formBase.discount" controls-position="right" :min="1" placeholder="请输入" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button class="cancel" @click="$emit('closeFrom')">取 消</el-button>
        <el-button
          class="true"
          type="primary"
          @click="addStrategyOrUpdate"
        >确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { addStrategyList, updataStrategyList } from '@/api/strategy'
export default {
  name: 'StrategyAdd',
  filters: {},
  props: {
    titleInfo: {
      type: Object,
      required: true
    },
    formBase: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      dialogFormVisible: false,
      rules: {
        policyName: [
          { required: true, message: '请输入策略名称', trigger: 'blur' }
        ],
        discount: [
          { required: true, message: '请输入策略方案', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {},
  watch: {},
  mounted() {},
  methods: {
    // 弹层显示
    dialogFormV() {
      this.dialogFormVisible = true
    },
    // 弹层隐藏
    dialogFormH() {
      this.$refs.dataForm.resetFields()
      this.dialogFormVisible = false
    },
    async addStrategyOrUpdate() {
      if (this.formBase.id) {
        try {
          this.formBase.id = null
          console.log(this.formBase)
          const res = {
            policyName: this.formBase.policyName,
            discount: this.formBase.discount,
            policyId: this.formBase.policyId
          }
          console.log(res)
          await updataStrategyList(res)
          this.$message.success('修改成功')
          this.$emit('getStrategyInfo')
          this.$emit('closeFrom')
        } catch (error) {
          console.log(error)
          this.$message.error('服务器内部错误')
          this.$emit('closeFrom')
        }
      } else {
        await addStrategyList(this.formBase)
        this.$message.success('新建成功')
        this.$emit('getStrategyInfo')
        this.dialogFormH()
      }
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-dialog{
    border-radius: 20px;
    font-size: 15px;
    font-weight: 700;
}
.dialog-footer{
    text-align: center;
    margin-bottom: 20px;
    .el-button{
        margin-right: 20px;
        height: 40px;
        width: 90px;
        line-height: 10px;
    }
    .cancel{
        background-color: #fbf4f0;
         border: #fbf4f0;
         color: #655b56;
    }
    .cancel:hover{
        background-color: #f3e7e1;
    }
    .true{
         background-color: #ff722c;
         border: #ff722c;
    }
    .true:hover{
        background-color: #e74d17;
    }
}
.el-input,.el-input-number{
    width: 400px;
}
::v-deep .el-form{
    margin-left: 10%;
}
</style>
